<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">



</head>
<body>
<jsp:include page="${APP_PATH}/common/head-question.jsp"/>
<div class="col-sm-12 col-md-12 col-lg-9" style="margin-left: auto;margin-right: auto;">
    <div class="my-3 p-4 bg-white rounded">
        <h4 class="border-bottom border-dark pb-2"><i class="fa fa-question"></i>邀请回答的问题</h4>
        <div id="questions" class="card-columns"></div>
    </div>
</div>
<div class="p-4"></div>

<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>

<script>
    //忽视问题
    function ignoreQuestion(ele) {
        var qulId = $(ele).attr("data-qulId");
        if (qulId) {
            $.ajax({
                url:'/updateHasread/'+qulId,
                type:'GET',
                success:function (result) {
                    if (result.code === 100) {
                        $("div[data-div-flag-qulId=" + qulId + "]").remove();
                        toastr.success("操作成功！");
                    }else{
                        toastr.error(result.extend.error);
                    }
                }
            });
        }
    }

    //获取HTML中的图片地址
    function getimgsrc(htmlstr) {
        var reg = /<img.+?src=('|")?([^'"]+)('|")?(?:\s+|>)/gim;
        var imgsrcArr = [];
        while (tem = reg.exec(htmlstr)) {
            imgsrcArr.push(tem[2]);
        }
        return imgsrcArr;
    }

    //过滤html标签
    function delHtmlTag(str) {
        return str.replace(/<[^>]+>/g, "");//去掉所有的html标记
    }

    $(function () {
        $.ajax({
            url:'/getUserToDoQuestion',
            type:'GET',
            success:function (result) {
                if (result.code === 100) {
                    if (result.extend.toDoQuestion) {
                        var $questions = $("#questions");
                        $.each(result.extend.toDoQuestion,function (index,item) {
                            if (item) {
                                var div_card = $("<div data-div-flag-qulId='"+item.id+"' class='card'></div>");
                                //判断该博客中是否包含图片
                                var imgsrc = getimgsrc(item.question.questioncontent);
                                if (imgsrc.length>0) {
                                    //alert(imgsrc[0]);
                                    //图片存在，card中插入图片
                                    div_card.append($("<img class='card-img-top' alt='博客封面' src='"+imgsrc[0]+"' data-holder-rendered='true'/>"));
                                }
                                var div_body = $("<div class='card-body'>");
                                var h5 = $("<h5 class='card-title'><a href='/question/"+item.questionid+"' class='text-dark'>" + item.question.questiontitle + "</a></h5>");
                                //内容截取，并去掉HTML标签
                                var content = item.question.questioncontent;
                                content = delHtmlTag(content);
                                content = content.substr(0, 200);
                                var p = $("<p class='card-text'>"+content+"</p>");
                                var p_small = $("<p class='card-text'><small class='text-muted'>"+new Date(item.question.edittime).toLocaleString()+"</small></p>");
                                var $btn_ignore = $("<a data-qulId='"+item.id+"' onclick='ignoreQuestion(this)' class='btn btn-sm btn-danger text-white'>不感兴趣</a>");
                                //开始封装
                                div_card.append(div_body.append(h5).append(p).append(p_small).append($btn_ignore)).appendTo($questions);
                            }
                        });
                    }
                }else{
                    toastr.error(result.extend.error);
                }
            }
        });
    });
</script>
</body>
</html>
